<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 900px;
            width: 100%;
            background-image: url(${pageContext.request.contextPath}/images/backgroud.png);
            background-repeat: no-repeat;
            background-size: cover; /* 或者使用 'contain' */
            background-position: center center; /* 使图片在容器中居中 */
        }
        a{
            color: blue;
            text-decoration: none;
        }
        #bigBox {
            /* ... other styles ... */
            position: absolute;
            top: 50%; /* 移动到父容器的垂直中点 */
            left: 50%; /* 移动到父容器的水平中点 */
            transform: translate(-50%, -50%); /* 向左和向上移动元素自身宽度和高度的一半 */
            /* Remove the auto margins since we're using absolute positioning */
            margin: 0;
            /* ... other styles ... */
        }
        #bigBox h1
        {
            font-size: 40px;
            color: blue;
        }
        #bigBox .inputBox
        {
            margin-top: 35px;
        }
        #bigBox .inputBox .inputText
        {
            margin-top: 20px;
        }
        #bigBox .inputBox .inputText input
        {
            border: 0;
            padding: 10px 10px;
            border-bottom: 1px solid blue;
            background-color: #00000000;
            color: blue;
            width: 200px;
            height: 40px;
            font-size: 20px;
        }
        #bigBox .inputBox .inputText i
        {
            color: blue;
        }
        #bigBox .inputBox .inputButton
        {
            border: 0;
            width: 200px;
            height: 50px;
            color: blue;
            margin-top: 55px;
            border-radius:20px;
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%,#b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }


    </style>

</head>
<body>
<div id="bigBox">
    <h1>注册页面</h1>
    <div class="inputBox">
        <form action="${pageContext.request.contextPath}/zhuce-complete.action" method="post">
            <div class="inputText">
                <i class="fa fa-user-circle" style="color: whitesmoke;"></i>
                <input type="text" placeholder="手机号或邮箱" name="username"/>
            </div>
            <div class="inputText">
                <i class="fa fa-key" style="color: whitesmoke;"></i>
                <input type="password" placeholder="密码" name="password"/>
            </div>
            <div class="inputText">
                <i class="fa fa-key" style="color: whitesmoke;"></i>
                <input type="password" placeholder="再次输入密码" name="password1"/>
            </div>
            <div class="inputText">
                <span style="color: white; font-weight: bold;">验证码</span>
                <input type = "text" id = "input"  class="fa fa-key" />
                <input type="button" id="code" onclick="createCode()" class="fa fa-key" title='点击更换验证码' />
            </div>
            <input type="submit"   onclick="return validate()"  class="inputButton" value="注册" />
        </form>
    </div>
</div>
<script type='text/javascript'>

    document.addEventListener('DOMContentLoaded', function() {
        createCode();
    });

    var code ; //在全局定义验证码

    function createCode(){
        code = "";
        var codeLength = 4;//验证码的长度
        var checkCode = document.getElementById("code");
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z');//随机数
        for(var i = 0; i < codeLength; i++) {//循环操作
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
            code += random[index];//根据索引取得随机数加到code上
        }
        checkCode.value = code;//把code值赋给验证码
    }
    function validate() {
        var password = document.getElementById("password").value;
        var password1 = document.getElementById("password1").value;
        if(password !== password1) {
            alert("密码前后不同！");
            return false;
        }
        if(password.length < 8) {
            alert("密码至少为8位！");
            return false;
        }
        var inputCode = document.getElementById("input").value.toUpperCase();
        if(inputCode.length <= 0) {
            alert("请输入验证码！");
            return false;
        }
        if(inputCode !== code) {
            alert("验证码输入错误！");
            createCode();
            document.getElementById("input").value = "";
            return false;
        }
        alert("合格！");
    }
</script>
</body>
</html>
